@charset "utf-8";
@import "reset";
@function baifenbi($p){
    @return $p / 1366 * 100%; 
}
@function baifenbi-2($p){
    @return $p / 1086 * 100%; 
}
@function baifenbi-3($p){
    @return $p/ 880 * 100%; 
}
.WebConent{
    width: 100%;
    min-width: 1280px;
}
.WebConent-Lunbo{
    width: 100%;
    text-align: center;
    height: 418px;
    overflow: hidden;
    background: url(../zl_img/lunbo.jpg);
    position: relative;
    >div:nth-of-type(2){
        >div{
            width: baifenbi(641);
            position: absolute;
            top: 0;
            left: -800px;
            background: white;
            >div{
                overflow: hidden;
                display: inline-block;
                margin: 35px 40px;
    
                >ul>li{
                    vertical-align: top;
                    line-height: 48px;
                    font-size: 15px;
                    color: #444f58;
                    display: inline-block;
                    margin: 0 30px;
        //          margin-left: 62px;
                    >ul>li{
                        line-height: 48px;
                        font-size: 13px;
                    }
                }
            }   
        }
    }
}
@keyframes move{
    0%{transform: translateX(0px);}
    100%{transform: translateX(1150px);}
}
@keyframes mymove{
    0%{transform: translateX(0px);}
    100%{transform: translateX(1300px);}
}
.WebConent-Lunbo-left{
    display: inline-block;
    width: baifenbi(132);
    overflow: hidden;
    cursor: pointer;
}
.WebConent-Lunbo-center{
    display: inline-block;
    width:baifenbi(1086);
    overflow: hidden;
    cursor: pointer;

}
.WebConent-Lunbo-right{
    display: inline-block;
    width: baifenbi(132);
    overflow: hidden;
    cursor: pointer;
}
.WebConent-Lunbo-bottom{
    text-align: center;
    width: 100%;
    margin-top: 5px;
    >div{
        cursor: pointer;
        display: inline-block;
    }
    >div:hover{
        >img{
            transform: scale(1.1);
        }
    }
    
    
}
.WebConent-Shangpin{
    width: 100%;
    text-align: center;
    >div{
        display: inline-block;
        >div{
            display: inline-block;
            overflow: hidden;
            >div{
                display: inline-block;
                vertical-align: top;
                >h3{
                    color: #444f58;
                    font-size: 14px;
                    margin-top: 20px;
                    margin-bottom: 16px;
                }
                >span:nth-of-type(1){
                    font-size: 12px;
                    color: white;
                    background: #eb413d;
                    height: 19px;
                    width: 54px;
                    line-height: 19px;
                    display: inline-block;
                    box-sizing: border-box;
                    padding: 0px 9px;
                    
                }
                >span:nth-of-type(2){
                    display: inline-block;
                    box-sizing: border-box;
                    font-size: 12px;
                    color: white;
                    background:black;
                    line-height: 19px;
                    height: 19px;
                    width: 54px;
                    padding: 0px 9px;
                    margin-left:-5px ;
                    
                }
                >p{
//                  display: inline-block;
                    margin-top: 6px;
                }
            }
            
        }
    }
    >div:nth-of-type(2){
        border-right: 1px solid #e5e5e5;
        padding-right: 14px;
        margin-left: 18px;
        >div{
            >div{
                cursor: pointer;
            }
            >div:hover{
                >img{
                    transform: scale(1.1);
                }
            }
            >div:nth-of-type(2){
                margin-left: 26px;
            }
        }
    }
    >div:nth-of-type(3){
        border-right: 1px solid #e5e5e5;
        padding-right: 14px;
        margin-left: 18px;
        >div{
            >div{
                cursor: pointer;
            }
            >div:hover{
                >img{
                    transform: scale(1.1);
                }
            }
            >div:nth-of-type(2){
                margin-left: 26px;
            }
        }
    }
    >div:nth-of-type(4){
        border-right: 1px solid #e5e5e5;
        padding-right: 14px;
        margin-left: 18px;
        >div{
            >div{
                cursor: pointer;
            }
            >div:hover{
                >img{
                    transform: scale(1.1);
                }
            }
            >div:nth-of-type(2){
                margin-left: 26px;
            }
        }
    }
    >div:nth-of-type(5){
        margin-left: 18px;
        >div{
            >div{
                cursor: pointer;
            }
            >div:hover{
                >img{
                    transform: scale(1.1);
                }
            }
            >div:nth-of-type(2){
                margin-left: 26px;
            }
        }
    }
    >div:nth-of-type(4){
        >div{
            >div{
                >img{
                    margin-bottom: -14px;
                }
            }
        }
    }
    >div:nth-of-type(5){
        >div{
            >div{
                >img{
                    margin-bottom: -4px;
                }
            }
        }
    }
    >div:nth-of-type(6){
        overflow: hidden;
        vertical-align: top;

    }
    >div:nth-of-type(1){
        overflow: hidden;
        vertical-align: top;
        margin-top: 9px;

    }
}
.WebConent-Title{
    text-align: center;
    color: #333333;
    font-size: 16px;
    width: baifenbi(1086);
    margin: 42px auto;
    position: relative;
    >span{
        position: absolute;
        right: 0px;
        top: 6px;
        font-size: 13px;
    }
}
.WebConent-Guanggao{
    margin-top: 46px;
    width: 100%;
    text-align: center;
     
    >div{
        width: baifenbi(1086);
        overflow: hidden;
        display: inline-block;
        margin: 0 auto;
    }
}
.WebConent-Content{
    width: baifenbi(1086);
    margin: 0 auto;    

}
.WebConent-Content-left{
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
    width: baifenbi-2(200);
    >div:nth-of-type(1){
        width: 200px;
        height: 116px;
        background: url(../zl_img/peijian-1.jpg);
        text-align: center;
        >h3{
            display: inline-block;
            color: white;
            font-weight: 100;
            font-size: 20px;
            border-bottom: white 2px solid;
            line-height: 34px;
            vertical-align: -150%;
            cursor: pointer;
        }
    }
    >div:nth-of-type(2){
        margin-top: 8px;
        padding: 10px 0px;
        width: 200px;
        background: #efefef;
        text-align: center;
        >ul>li{
            height: 42px;
            line-height: 42px;
            color: #7f7f7f;
            font-size: 16px;
            cursor: pointer;
        }
        >ul>li:hover{
            background:#686F76;
            color: white;
        }
    }
}

.WebConent-Content-right{
    position: relative;
    vertical-align: top;
    overflow: hidden;
    display: inline-block;
    width:81%;
    >div:nth-of-type(1){
        width:baifenbi-3(268);
        vertical-align: top;
        display: inline-block;
        overflow: hidden;
        margin-left:9px ;
        div:nth-of-type(1){
            position: relative;
            >div:hover{
                background:rgba(19,8,249,0.4);
            }
            >div{
                height: 64px;
                width: 100%;
                color: white;
                background: rgba(218,54,54,0.9);
                position: absolute;
                bottom: 4px;
                padding-top: 14px;
                padding-left: 22px;
                box-sizing: border-box;
                >span{
                    position: absolute;
                    right: 16px;
                    bottom: 12px;
                }
            }
        }
    }
    >div:nth-of-type(1){
        display: inline-block;
        div:nth-of-type(2){
            position: relative;
            >div:hover{
                background:rgba(255,102,0,0.9);
            }
            >div{
                height: 64px;
                width: 100%;
                color: white;
                background: rgba(218,54,54,0.9);
                position: absolute;
                bottom: 4px;
                padding-top: 14px;
                padding-left: 22px;
                box-sizing: border-box;
                >span{
                    position: absolute;
                    right: 16px;
                    bottom: 12px;
                }
            }
        }
    }
    >div:nth-of-type(2){
        position: absolute;
        right: 0px;
        vertical-align: top;
        width:baifenbi-3(588);
        display: inline-block;
        >div:hover{
            border: 1px solid deeppink;
        }
        >div{
            cursor: pointer;
            display: inline-block;
            border: 1px solid #dee0e2;
            height:278px;
            overflow: hidden;
            text-align: left;
            position: relative;
            width: 32%;
            >div:nth-of-type(1){
                position: relative;
                height:176px;
                overflow: hidden;
                >img{
                    position: absolute;
                    left:50% ;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            >div:nth-of-type(2){
                background: #efefef;
                height: 80px;
                width: 100%;
                vertical-align: bottom;
                position: absolute;
                bottom: 0px;
                 >p{
                        margin-top: 12px;
                        color: #444f58;
                        font-size: 15px;
                        margin-left: 9px;
                    }
                >span{
                    color: #99999a;
                    font-size: 15px;
                    margin-left: 9px;
                    margin-bottom: 4px;
                    position: relative;
                    >div{
                        position: absolute;
                        bottom:-22px;
                        width: 83px;
                        height: 20px;
                        background: black;
                        border-radius:10px;
                        display: inline-block;
                        color: white;
                        font-size: 12px;
                        margin-left:90%;
                        line-height: 20px;
                        >img{
                            margin-left: 7px;
                            vertical-align: -4%;
                        }
                    }
                }
            }   
        }
    }
}
.WebConent-Guanggao-paobu{
    width: baifenbi(1086);
    margin: 0 auto;
    margin-bottom: 10px;
//  position: relative;
    >div:nth-of-type(1){
        cursor: pointer;
        text-align: center;
        display: inline-block;
        width:baifenbi-2(540);
        background: url(../zl_img/fenlei-10.jpg);
        height: 214px;
        >h1{
            font-size: 23px;
            color: white;
            font-weight: bold;
            margin-top: 80px;
            font-family: arial;
            transform: scaleX(1.4);
            margin-left: 58px;
        }
        >p{
            font-size: 16px;
            color: white;
            margin-left: 58px;
        }
    }
    >div:nth-of-type(2){
        cursor: pointer;
        text-align: center;
        width:baifenbi-2(540);
        background: url(../zl_img/fenlei-11.jpg);
        height: 214px;
        display: inline-block;
        >h1{
            margin-left: 58px;
            text-align: center;
            transform: scaleX(1.4);
            font-size: 22px;
            color: white;
            margin-top: 80px;
        }
        >p{
            font-size: 16px;
            color: white;
            margin-left: 58px;
        }
    }
}
.WebConent-zhanshi-paobu{
    width: baifenbi(1086);
    margin: 0 auto;
    position: relative;
    >div:nth-of-type(1){
        vertical-align: top;
        padding: 14px 0px;
        width: 200px;
        background: #efefef;
        text-align: center;
        display: inline-block;
        >ul>li{
            height: 42px;
            line-height: 42px;
            color: #7f7f7f;
            font-size: 16px;
        }
        >ul>li:hover{
            background:#686F76;
            color: white;
        }
    }
    >div:nth-of-type(2){
        vertical-align: top;
        position: absolute;
        text-align:right;
        right: 0px;
        display: inline-block;
        width:baifenbi-2(865);
        >div:hover{
            border: 1px solid deeppink;
        }
        >div{
            cursor: pointer;
            display: inline-block;
            border: 1px solid #dee0e2;
            height:278px;
            width: 24%;
            overflow: hidden;
            text-align: left;
            position: relative;
            margin:0px  1px;
            
//          width: 32%;
            >div:nth-of-type(1){
                position: relative;
                height:176px;
                overflow: hidden;
                >img{
                    position: absolute;
                    left:50% ;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            >div:nth-of-type(2){
                background: #efefef;
                height: 80px;
                width: 100%;
                vertical-align: bottom;
                position: absolute;
                bottom: 0px;
                 >p{
                        margin-top: 12px;
                        color: #444f58;
                        font-size: 15px;
                        margin-left: 9px;
                    }
                >span{
                    color: #99999a;
                    font-size: 15px;
                    margin-left: 9px;
                    margin-bottom: 4px;
                    position: relative;
                    >div{
                        position: absolute;
                        bottom:-22px;
                        width: 83px;
                        height: 20px;
                        background: black;
                        border-radius:10px;
                        display: inline-block;
                        color: white;
                        font-size: 12px;
                        margin-left: 125%;
                        line-height: 20px;
                        >img{
                            margin-left: 7px;
                            vertical-align: -4%;
                        }
                    }
                }
            }   
        }
    }
}
.WebConent-Guanggao-tiesan{
    width: baifenbi(1086);
    margin: 0 auto;
    text-align: center;
    >div:nth-of-type(1){
        display: inline-block;
        width:baifenbi-2(540);
        background: url(../zl_img/fenlei-12.jpg);
        height: 214px;
        >h1{
            font-size: 23px;
            color: white;
            font-weight: bold;
            margin-top: 80px;
            font-family: arial;
            transform: scaleX(1.4);
            margin-left: 58px;
        }
        >p{
            font-size: 16px;
            color: white;
            margin-left: 58px;
        }
    }
    >div:nth-of-type(2){
        width:baifenbi-2(540);
        background: url(../zl_img/fenlei-14.jpg);
        height: 214px;
        display: inline-block;
        >h1{
            margin-left: 58px;
            text-align: center;
            transform: scaleX(1.4);
            font-size: 22px;
            color: white;
            margin-top: 80px;
        }
        >p{
            font-size: 16px;
            color: white;
            margin-left: 58px;
        }
    }
}
.WebConent-zhanshi-tiesan{
    width: baifenbi(1086);
    margin: 0 auto;
    position: relative;
    margin-top: 6px;
    >div:nth-of-type(1){
        vertical-align: top;
        display: inline-block;
        overflow: hidden;
        width: baifenbi-2(200);
        >div:nth-of-type(1){
            width: 200px;
            height: 116px;
            background: url(../zl_img/peijian-2.jpg);
            text-align: center;
            margin-bottom: 10px;
            overflow: hidden;
            >h3{
                display: inline-block;
                color: white;
                font-weight: 100;
                font-size: 20px;
                border-bottom: white 2px solid;
                line-height: 34px;
                vertical-align: -150%;
            }
        }
        >div:nth-of-type(2){
            margin-top: 8px;
            padding: 14px 0px;
            width: 200px;
            background: #efefef;
            text-align: center;
            >ul>li{
                height: 42px;
                line-height: 42px;
                color: #7f7f7f;
                font-size: 16px;
            }
            >ul>li:hover{
                background:#686F76;
                color: white;
            }
        }
    }
    >div:nth-of-type(2){
        vertical-align: top;
        position: absolute;
        text-align:right;
        right: 0px;
        display: inline-block;
        width:baifenbi-2(865);
        >div:hover{
            border: 1px solid deeppink;
        }
        >div{
            cursor: pointer;
            display: inline-block;
            border: 1px solid #dee0e2;
            height:278px;
            width: 24%;
            overflow: hidden;
            text-align: left;
            position: relative;
            margin:0px  1px;
            
//          width: 32%;
            >div:nth-of-type(1){
                position: relative;
                height:176px;
                overflow: hidden;
                >img{
                    position: absolute;
                    left:50% ;
                    top: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            >div:nth-of-type(2){
                background: #efefef;
                height: 80px;
                width: 100%;
                vertical-align: bottom;
                position: absolute;
                bottom: 0px;
                 >p{
                        margin-top: 12px;
                        color: #444f58;
                        font-size: 15px;
                        margin-left: 9px;
                    }
                >span{
                    color: #99999a;
                    font-size: 15px;
                    margin-left: 9px;
                    margin-bottom: 4px;
                    position: relative;
                    >div{
                        position: absolute;
                        bottom:-22px;
                        width: 83px;
                        height: 20px;
                        background: black;
                        border-radius:10px;
                        display: inline-block;
                        color: white;
                        font-size: 12px;
                        margin-left: 44px;
                        line-height: 20px;
                        >img{
                            margin-left: 7px;
                            vertical-align: -4%;
                        }
                    }
                }
            }   
        }
    }
}
.WebConent-xiuxian{
    width: baifenbi(1086);
    margin: 0 auto;
    font-size: 22px;
    text-align: justify;
    
    >div:hover{
        >img{
            transition:all 1s;
            transform: scale(1.2);
        }
    }
    >div{
        cursor: pointer;
        display: inline-block;
        position: relative;
        width: 24%;
        margin:0 auto;
        overflow: hidden;
        margin-right:2px;
        >div{
            height: 64px;
            width: 100%;
            color: white;
            background: rgba(218,54,54,0.9);
            position: absolute;
            bottom:0px;
            padding-top: 14px;
            padding-left: 22px;
            box-sizing: border-box;
            >span{
                position: absolute;
                right: 16px;
                bottom: 12px;
            }
        }
    }
}
.WebConent-pinpai{
    width: baifenbi(1086);
    margin: 0 auto;
    margin-bottom: 38px;
    >div{
        cursor: pointer;
        overflow: hidden;
        display: inline-block;
        width: 16%;
        height: 83px;
    }
    >div:nth-of-type(12){
        text-align: center;
        >p{
            display: inline-block;
            vertical-align: -190%;
        }
        
    }
}
.bcak{
    display: inline-block;
    position: fixed;
    top: 500px;
    right: 10px;
    border: 1px solid black;
    width: 30px;
    height: 30px;
    color: black;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}
.bcak:hover{
//  -webkit-animation: move 1s 1;
    background: black;
    color: white;
    transition: all 1s ;
    transform: rotate(720deg);
}
@-webkit-keyframes move{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(720deg);
    }
}